import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/resources/str_res_keys.dart';
import 'package:yt_devops/styles/styles.dart';
import 'package:yt_devops/utils/enums.dart';

/**
 *
 * @Description TODO
 * @Author liuer
 * @CreateTime 2024年03月27日 09:01
 */
class StatisticsTimeUnitTab extends StatefulWidget {
  StatisticUnitStatusType type;
  final double margin;

  final Function(StatisticUnitStatusType) callBack;
  StatisticsTimeUnitTab(this.type, this.callBack,
      {this.margin = 16, super.key});

  @override
  State<StatisticsTimeUnitTab> createState() => _StatisticsTimeUnitTabState();
}

class _StatisticsTimeUnitTabState extends State<StatisticsTimeUnitTab> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      double tabWidth = (constraints.maxWidth -
              ScreenUtil().setWidth(widget.margin) * 2 -
              2.w * 5) /
          4;

      return Container(
        height: 32,
        width: double.infinity,
        margin: EdgeInsets.only(
          top: 16,
          left: ScreenUtil().setWidth(widget.margin),
          right: ScreenUtil().setWidth(widget.margin),
        ),
        decoration: BoxDecoration(
          color: Colour.backgroundColor,
          borderRadius: BorderRadius.all(
            Radius.circular(8),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            /// 日
            GestureDetector(
              onTap: () {
                if (widget.type == StatisticUnitStatusType.day) return;
                setState(() {
                  widget.type = StatisticUnitStatusType.day;
                });
                widget.callBack(StatisticUnitStatusType.day);
              },
              child: Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(
                  left: 2.w,
                  top: 2,
                  bottom: 2,
                ),
                width: tabWidth,
                height: 28,
                decoration: widget.type == StatisticUnitStatusType.day
                    ? const BoxDecoration(
                        color: Colour.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(8),
                        ),
                      )
                    : const BoxDecoration(),
                child: Text(
                  ResKey.day.tr,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15.sp,
                  ),
                ),
              ),
            ),
            Container(
              width: 2.w,
              height: 18,
              color: const Color(0xFFEEEEEE),
            ),

            /// 月
            GestureDetector(
              onTap: () {
                if (widget.type == StatisticUnitStatusType.month) return;
                setState(() {
                  widget.type = StatisticUnitStatusType.month;
                });
                widget.callBack(StatisticUnitStatusType.month);
              },
              child: Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(
                  top: 2,
                  bottom: 2,
                ),
                width: tabWidth,
                height: 28,
                decoration: widget.type == StatisticUnitStatusType.month
                    ? BoxDecoration(
                        color: Colour.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(8),
                        ),
                      )
                    : const BoxDecoration(),
                child: Text(
                  ResKey.month.tr,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15.sp,
                  ),
                ),
              ),
            ),
            Container(
              width: 2.w,
              height: 18,
              color: const Color(0xFFEEEEEE),
            ),

            /// 年
            GestureDetector(
              onTap: () {
                if (widget.type == StatisticUnitStatusType.year) return;
                setState(() {
                  widget.type = StatisticUnitStatusType.year;
                });
                widget.callBack(StatisticUnitStatusType.year);
              },
              child: Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(
                  top: 2,
                  bottom: 2,
                ),
                width: tabWidth,
                height: 28,
                decoration: widget.type == StatisticUnitStatusType.year
                    ? BoxDecoration(
                        color: Colour.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(8),
                        ),
                      )
                    : const BoxDecoration(),
                child: Text(
                  ResKey.year.tr,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15.sp,
                  ),
                ),
              ),
            ),
            Container(
              width: 2.w,
              height: 18,
              color: const Color(0xFFEEEEEE),
            ),

            /// 累计
            GestureDetector(
              onTap: () {
                if (widget.type == StatisticUnitStatusType.accumulate) return;
                setState(() {
                  widget.type = StatisticUnitStatusType.accumulate;
                });
                widget.callBack(StatisticUnitStatusType.accumulate);
              },
              child: Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(
                  top: 2,
                  bottom: 2,
                  right: 2.w,
                ),
                width: tabWidth,
                height: 28,
                decoration: widget.type == StatisticUnitStatusType.accumulate
                    ? BoxDecoration(
                        color: Colour.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(8),
                        ),
                      )
                    : const BoxDecoration(),
                child: Text(
                  ResKey.accumulate.tr,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15.sp,
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    });
  }
}
